@extends('layouts.admin')

@section('style')
    <style>
        #page li {
            display: inline-block;
        }

        #page .active span {
            background-color: #009688;
            color: #fff;
            border: 0px;
            height: 30px;
            border-radius: 2px;
        }

        #page .disabled span {
            color: #ccc;
        }
    </style>
@endsection

@section('content')

    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-huokuan-form-files">选择货款文件</button>
        <button type="button" class="layui-btn" id="ID-upload-dingdan-form-files">选择订单文件</button>
    </div>
    
    <table class="layui-table">
        <colgroup>
            <col width="50">
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th>订单号</th>
            <th>省份</th>
            <th>商品数量</th>
            <th>商品编码</th>
            <th>配件总计</th>
            <th>成本总计</th>
            <th>打包总计</th>
            <th>运费总计</th>
            <th>应收总计</th>
        </tr>
        </thead>
        <tbody class="water-pipe">
            <!-- <tr>
                <td width="10%"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </tbody>
    </table>

    <div id="page" class="layui-box layui-laypage layui-laypage-default"></div>
@endsection

@section('script')

    <script>
        $('.search-btn-union').on('click',function(){
            var keywords = $('#keywords').val();
            var url = '/admin/report/index?keywords='+keywords;
            window.location.href = url; //当前窗口打开
        });
        var keywords = $('#keywords').val();

        layui.use(['layer','upload'], function () {
            var layer = layui.layer;
            var upload = layui.upload;
            // 渲染
            upload.render({
                elem: '#ID-upload-huokuan-form-files',
                url: "{{ route('admin.waterPipe.huokuanUpload') }}", // 此处配置你自己的上传接口即可
                accept:'file',
                headers:{'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                done: function(data){
                    console.log(data)
                    if (data.code === 0) {
                        // $('.originalName').text(data.data.originalName);
                        // $('.actualTotalPrice').text(data.data.actualTotalPrice);
                        // $('.receivableTotalPrice').text(data.data.receivableTotalPrice);
                        // $('.profit').text(data.data.profit);
                        // $('.water-pipe').append('<tr><td>'+data.data.originalName+'</td><td>'+data.data.actualTotalPrice+'</td><td>'+data.data.receivableTotalPrice+'</td><td>'+data.data.profit+'</td></tr>');

                        var html = '';
                        $.each(data.data.list,function(k,v){
                            html += '<tr class="orderNo_'+v.orderNo+'" data-orderNo="'+v.orderNo+'"><td>'+v.k+'</td><td>'+v.orderNo+'</td><td>'+v.province+'</td><td>'+v.number+'</td><td>'+v.productCode+'</td><td><span class="peijianzongji">'+v.peijianzongji+'</span><br><span class="peijianzongji_diff"></span></td><td><span class="chengbenzongji">'+v.chengbenzongji+'</span><br><span class="chengbenzongji_diff"></span></td><td><span class="dabaozongji">'+v.dabaozongji+'</span><br><span class="dabaozongji_diff"></span></td><td><span class="yunfeizongji">'+v.yunfeizongji+'</span><br><span class="yunfeizongji_diff"></span></td><td><span class="yingshouzongji">'+v.yingshouzongji+'</span><br><span class="yingshouzongji_diff"></span></td></tr>';
                        });
                        $('.water-pipe').html(html);

                    } else {
                        layer.msg(data.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 2000
                        });
                    }
                }
            });

            // 渲染
            upload.render({
                elem: '#ID-upload-dingdan-form-files',
                url: "{{ route('admin.waterPipe.dingdanUpload') }}", // 此处配置你自己的上传接口即可
                accept:'file',
                headers:{'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                done: function(data){
                    console.log(data)
                    if (data.code === 0) {
                        // $('.originalName').text(data.data.originalName);
                        // $('.actualTotalPrice').text(data.data.actualTotalPrice);
                        // $('.receivableTotalPrice').text(data.data.receivableTotalPrice);
                        // $('.profit').text(data.data.profit);
                        // $('.water-pipe').append('<tr><td>'+data.data.originalName+'</td><td>'+data.data.actualTotalPrice+'</td><td>'+data.data.receivableTotalPrice+'</td><td>'+data.data.profit+'</td></tr>');

                        
                        $.each(data.data.list,function(k,v){
                            
                            var peijianzongji = $('.orderNo_'+v.orderNo).find('td').find('.peijianzongji').text();
                            var chengbenzongji = $('.orderNo_'+v.orderNo).find('td').find('.chengbenzongji').text();
                            var dabaozongji = $('.orderNo_'+v.orderNo).find('td').find('.dabaozongji').text();
                            var yunfeizongji = $('.orderNo_'+v.orderNo).find('td').find('.yunfeizongji').text();
                            var yingshouzongji = $('.orderNo_'+v.orderNo).find('td').find('.yingshouzongji').text();

                            if(peijianzongji != v.peijianzongji){
                                $('.orderNo_'+v.orderNo).find('td').find('.peijianzongji_diff').html(v.peijianzongji).css("color","red");
                            }
                            if(chengbenzongji != v.chengbenzongji){
                                $('.orderNo_'+v.orderNo).find('td').find('.chengbenzongji_diff').html(v.chengbenzongji).css("color","red");
                            }
                            if(dabaozongji != v.dabaozongji){
                                $('.orderNo_'+v.orderNo).find('td').find('.dabaozongji_diff').html(v.dabaozongji).css("color","red");
                            }
                            if(yunfeizongji != v.yunfeizongji){
                                $('.orderNo_'+v.orderNo).find('td').find('.yunfeizongji_diff').html(v.yunfeizongji).css("color","red");
                            }
                            if(yingshouzongji != v.yingshouzongji){
                                $('.orderNo_'+v.orderNo).find('td').find('.yingshouzongji_diff').html(v.yingshouzongji).css("color","red");
                            }

                            $('.orderNo_'+v.orderNo).find('td').find('.peijianzongji_diff').html(v.peijianzongji);
                            $('.orderNo_'+v.orderNo).find('td').find('.chengbenzongji_diff').html(v.chengbenzongji);
                            $('.orderNo_'+v.orderNo).find('td').find('.dabaozongji_diff').html(v.dabaozongji);
                            $('.orderNo_'+v.orderNo).find('td').find('.yunfeizongji_diff').html(v.yunfeizongji);
                            $('.orderNo_'+v.orderNo).find('td').find('.yingshouzongji_diff').html(v.yingshouzongji);
                        });
                        

                    } else {
                        layer.msg(data.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 2000
                        });
                    }
                }
            });
        });
    </script>

@endsection